<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<title>버튼 변경하기</title>
<meta name="class-lists" content="jindo.Pagination"/>
<meta name="screenshots" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="버튼 모양을 변경하는 예제입니다.">
<link rel="stylesheet" type="text/css" href="../asset/demo.css">
<style type="text/css">
	.paginate1{ padding:15px 0; text-align:center; display:none;}
	.paginate1 *{ margin:0; padding:0;}
	.paginate1 a,
	.paginate1 strong{ _position:relative; margin-left:-1px; font-weight:bold; display:inline-block; padding:3px 8px 1px 7px; color:#313031; border-left:1px solid #ccc; border-right:1px solid #ccc; text-decoration:none; line-height:normal; font:bold 12px 돋움, Dotum, 굴림, Gulim, AppleGothic, Sans-serif; background:#fff;}
	.paginate1 strong{ color:#ff8600 !important;}
	.paginate1 a:hover{ background:#F7F7F7; }
	.paginate1 a.pre{ padding:3px 8px 1px 16px; background:url(http://static.naver.com/common/paginate/bu_pg1_l1.gif) no-repeat 8px 6px !important; border:none; font-weight:normal; }
	.paginate1 a.pre_end{ padding:3px 8px 1px 16px; background:url(http://static.naver.com/common/paginate/bu_pg1_l2.gif) no-repeat 4px 6px !important; border:none; border-right:1px solid #ccc; font-weight:normal;}
	.paginate1 a.next{ padding:3px 16px 1px 8px; background:url(http://static.naver.com/common/paginate/bu_pg1_r1.gif) no-repeat 37px 6px !important; border:none; font-weight:normal; }
	.paginate1 a.next_end{ padding:3px 16px 1px 8px; background:url(http://static.naver.com/common/paginate/bu_pg1_r2.gif) no-repeat 37px 6px !important; border:none; border-left:1px solid #ccc; font-weight:normal;}
	.paginate1.loaded { display:block;}
	.paginate1.only-one { display:block;}
	.paginate1.no-result { display:none;}
	
	.paginate2 { padding:16px 0; text-align:center; display:none;}
	.paginate2 a,
	.paginate2 strong { position:relative; display:inline-block; margin-right:1px; padding:2px 4px 3px 4px; color:#000; text-decoration:none; border:1px solid #ffffff; font:bold 11px/normal Verdana; _width /**/:17px;}
	.paginate2 strong { color:#f23219 !important; border:1px solid #e9e9e9;}
	.paginate2 .pre { margin-right:6px; padding:4px 6px 2px 14px; _padding-bottom:1px; background:url(http://static.naver.com/common/paginate/bu_pg3_l_off.gif) no-repeat 6px 5px !important; letter-spacing:-1px;}
	.paginate2 .next { margin-left:4px; padding:4px 14px 2px 6px; _padding-bottom:1px; background:url(http://static.naver.com/common/paginate/bu_pg3_r_off.gif) no-repeat 62px 5px !important; letter-spacing:-1px;}
	.paginate2 a.pre { background:url(http://static.naver.com/common/paginate/bu_pg3_l_on.gif) no-repeat 6px 5px !important;}
	.paginate2 a.next { background:url(http://static.naver.com/common/paginate/bu_pg3_r_on.gif) no-repeat 62px 5px !important;}
	.paginate2 .pre,
	.paginate2 .next { display:inline-block; color:#ccc; border:1px solid #e9e9e9; position:relative; top:0; _top:-2px; font:11px/normal 돋움, Dotum; _width /**/:75px;}
	.paginate2 a.pre,
	.paginate2 a.next { color:#565656;}
	.paginate2 a:hover { background-color:#f7f7f7 !important; border:1px solid #e9e9e9;}
	.paginate2.loaded { display:block;}
	.paginate2.only-one { display:block;}
	.paginate2.no-result { display:none;}
</style>
</head>
<body>
<script type="text/javascript" src="../asset/demojs/demo.js#header"
     data-title="Jindo Component"
     data-subtitle="=document.title"
     data-backbutton="false"
     data-viewsource="false"
     data-qrcode="true"></script>
	
<div class="demo">
	<h4>이전/다음 페이지 버튼이 항상 보임. 이동단위 : 페이지</h4> 
	<div id="paginate_1" class="paginate2"> 
		<span class="pre">이전페이지</span> 
		<span class="next">다음페이지</span> 
		<a href="#" class="pre">이전페이지</a> 
		<a href="#" class="next">다음페이지</a> 
	</div> 
	<h4>처음/이전/다음/끝 버튼이 모두 있는 경우</h4> 
	<div id="paginate_2" class="paginate1"> 
		<a href="#" class="pre">이전</a> 
		<a href="#" class="next">다음</a> 
	</div>
</div>

<script type="text/javascript" charset="utf-8" src="../../asset/jindo.desktop.all.ns.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Component.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.UIComponent.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Pagination.js"></script>
<script type="text/javascript">
	var oPagination1 = new jindo.Pagination("paginate_1", {
		nItem : 1000,
		nItemPerPage : 10,
		nPagePerPageList : 10,
		nPage : 1,
		sMoveUnit : "page"
	}).attach({
		move : function(oCustomEvent) {
		},
		click : function(oCustomEvent) {
		}
	});

	var oPagination2 = new jindo.Pagination("paginate_2", {
		nItem : 200,
		nItemPerPage : 10,
		nPagePerPageList : 10,
		nPage : 1,
		sPageTemplate : "<a href='#'><span>{=page}</span></a>",
		elFirstPageLinkOn : jindo.$('<a href="#"><<</a>'),
		elPrevPageLinkOn : jindo.$('<a href="#"><</a>'),
		elNextPageLinkOn : jindo.$('<a href="#">></a>'),
		elLastPageLinkOn : jindo.$('<a href="#">>></a>'),
		elFirstPageLinkOff : jindo.$('<a href="#" style="color:#cccccc;"><<</a>'),
		elPrevPageLinkOff : jindo.$('<a href="#" style="color:#cccccc;"><</a>'),
		elNextPageLinkOff : jindo.$('<a href="#" style="color:#cccccc;">></a>'),
		elLastPageLinkOff : jindo.$('<a href="#" style="color:#cccccc;">>></a>')
	}).attach({
		move : function(oCustomEvent) {
		},
		click : function(oCustomEvent) {
		}
	});
</script>
<script type="text/javascript" src="../asset/demojs/demo.js#footer"></script>
</body>
</html>
